<template>
  <div>
    <el-card class="extra-card">
      <div slot="header" class="clearfix d-flex align-items-center">
        <b style="display: inline-block; margin-right: 12px">可配血液记录</b>
        <div>
          <el-tag type="primary">
            <b>
              总袋数：
              <i class="font20">{{ count }}</i>
              袋
            </b>
          </el-tag>
          <el-tag type="success">
            <b>
              总血量：
              <i class="font20">{{ capacity }}</i>
              U
            </b>
          </el-tag>
        </div>
        <div class="d-flex mlauto">
          <el-input
            v-model.trim="blood_id"
            class="wd150 mr12"
            clearable
            placeholder="血袋号"
          />
          <el-select
            v-model="blood_match_category"
            class="mlauto wd150"
            :popper-append-to-body="false"
            popper-class="pop-div-my"
            size="small"
            @change="changeBloodMatchCategory"
          >
            <el-option
              v-for="(item, index) in bloodMatchCategories"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <el-table
        border
        :data="bloodsFilter"
        :height="height"
        :row-class-name="tableRowClassName"
        stripe
        style="width: 100%"
        @row-click="handleRowClick"
      >
        <el-table-column
          align="center"
          label="血袋号配血试管号"
          prop="BLOOD_ID"
          width="90"
        >
          <template #header>
            <div class="flex flex-column">
              <span>血袋号</span>
              <span>配血试管号</span>
            </div>
          </template>
          <template #default="{ row }">
            <div class="flex flex-column">
              <span>{{ row.BLOOD_ID }}</span>
              <span>{{ row.BLOOD_ID_UP }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="标本位置"
          prop="nodata"
          width="80"
        >
          <template #default>
            <span>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="献血者" prop="NAME" width="70" />
        <el-table-column
          align="center"
          label="血员号"
          prop="BLOOD_DONOR_ID"
          width="80"
        />
        <el-table-column
          align="center"
          label="血源"
          prop="BLOOD_SOURCE"
          sortable
          width="70"
        />
        <el-table-column
          align="center"
          label="血液成分"
          prop="BLOOD_TYPE_NAME"
          sortable
          width="160"
        />
        <el-table-column
          align="center"
          label="血量"
          prop="BLOOD_CAPACITY"
          sortable
          width="70"
        />
        <el-table-column
          align="center"
          label="血型|RhD"
          prop="BLOOD_GROUP"
          width="80"
        >
          <template #default="{ row }">
            <b class="font20" :class="getAboRhdClass(row)">
              {{ getAboRhd(row) }}
            </b>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="复检血型|RhD"
          prop="BLOOD_GROUP"
          width="100"
        >
          <template #default="{ row }">
            {{ getAboRhdRecheck(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="RH分型" prop="RHFX" width="80" />
        <el-table-column
          align="center"
          fixed="right"
          label="采血时间"
          prop="BLOOD_GATHER_DATE"
          sortable
        >
          <template #default="{ row }">
            <div class="flex flex-column">
              <span>{{ getDate(row.BLOOD_GATHER_DATE)[0] }}</span>
              <span>{{ getDate(row.BLOOD_GATHER_DATE)[1] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="失效时间"
          prop="INVAL_DATE"
          sortable
        >
          <template #default="{ row }">
            <div class="flex flex-column">
              <span>{{ getDate(row.INVAL_DATE)[0] }}</span>
              <span>{{ getDate(row.INVAL_DATE)[1] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="过期时间"
          prop="INVAL_DATE"
          width="150"
        >
          <template #default="scope">
            <el-tag
              :type="
                getInvalidDayClass(scope.row.INVAL_DATE, scope.row.CURRENT_TIME)
              "
            >
              {{ getInvalidDay(scope.row.INVAL_DATE, scope.row.CURRENT_TIME) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import { bloodMatchCategories } from '@/utils/constant'
  import { getFilterBloodMatchTypeName, getDiffDays } from '@/utils'
  import { mapGetters } from 'vuex'
  import { sum } from '@/utils/index'
  export default {
    props: {
      bloods: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        blood_id: '',
        blood_match_category: 1,
        bloodMatchCategories,
        height: 'calc(100vh - 435px)',
      }
    },
    computed: {
      ...mapGetters({
        bloodMatchTypePid: 'initialData/bloodMatchTypePid',
        systemSet: 'initialData/systemSet',
      }),
      filterBloodMatchTypeName() {
        return getFilterBloodMatchTypeName(this.bloodMatchTypePid)
      },
      bloodsFilter() {
        let res = this.bloods.filter((item) => {
          if (+this.bloodMatchTypePid === 1) {
            return (
              item.BLOOD_TYPE_NAME.indexOf(this.filterBloodMatchTypeName) > -1
            )
          }
          if (+this.bloodMatchTypePid === 2) {
            return (
              item.BLOOD_TYPE_NAME.indexOf(this.filterBloodMatchTypeName) >
                -1 && item.BLOOD_TYPE_NAME.indexOf('浓缩血小板') === -1
            )
          }
          if (+this.bloodMatchTypePid === 7) {
            return (
              item.BLOOD_TYPE_NAME.indexOf(this.filterBloodMatchTypeName) > -1
            )
          }
        })

        if (this.blood_id.length > 0) {
          res = res.filter((item) => {
            return item.BLOOD_ID.indexOf(this.blood_id) > -1
          })
        }

        return res
      },
      count() {
        return this.bloodsFilter.length
      },
      capacity() {
        return sum(this.bloodsFilter.map((val) => +val.BLOOD_CAPACITY))
      },
    },
    methods: {
      getAboRhdRecheck(row) {
        return [row.BLOOD_GROUP_RECHECK, row.RH_RECHECK].join(' | ')
      },
      getAboRhdClass(row) {
        const map = {
          A: 'color-primary',
          B: 'color-warning',
          O: 'color-success',
          AB: 'color-danger',
        }
        return map[row.BLOOD_GROUP]
      },
      getAboRhd(row) {
        return [row.BLOOD_GROUP, row.RH].join(' | ')
      },
      getDate(time) {
        if (time) {
          return time.substr(0, time.length - 3).split(' ')
        }
        return ['', '']
      },
      changeBloodMatchCategory(val) {
        this.$emit('changeBloodMatchCategory', val)
      },
      handleRowClick(row) {
        const index = this.bloods.findIndex((val) => {
          return val.BLOOD_ID_UP === row.BLOOD_ID_UP
        })
        this.$emit('addBloodMatchRecord', row, index)
      },
      getInvalidDay(invalid_time, current_time) {
        const { days, hours, mins } = getDiffDays(invalid_time, current_time)
        return `${days}天${hours}时${mins}分`
      },
      getInvalidDayClass(invalid_time, current_time) {
        const { days } = getDiffDays(invalid_time, current_time)
        if (days < this.systemSet.blood_invalid_days) {
          return 'danger'
        }
        return 'success'
      },
      tableRowClassName({ row }) {
        const type = this.getInvalidDayClass(row.INVAL_DATE, row.CURRENT_TIME)
        if (type === 'danger') {
          return 'color-' + type
        }
        return ''
      },
    },
  }
</script>

<style lang="scss" scoped></style>
